<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-09 11:28:10
-->
<template>
    <div class="banner">
        <el-carousel :interval="6000" type="card" height="200px">
            <el-carousel-item v-for="(item, index) in banner" :key="index" @click="get(item)">
                <img :src="item.imageUrl" alt="">
                <div class="title" :class="item.titleColor == 'red' ? 'red' : 'blue'">{{ item.typeTitle }}</div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'
import { useMusicStore } from '@/store/music.js'
import { getSongUrl, getEverySongDetail } from '@/api/playmusic/playmusic.js'
import mitter from '@/utils/mitt.js'
defineProps({
    banner: {
        type: Array,
        default: []
    }
})
const router = useRouter()
const music = useMusicStore()

//获取歌曲播放URL，并存放到仓库中
async function getSongUrlBy(id) {
    let res = await getSongUrl(id)
    console.log(res);
    if (res.data.code == 200) {
        music.saveSongUrl(res.data.data[0].url) //保存歌曲播放地址
    }
}
//获取歌曲详细,保存歌曲详细信息，添加当前和历史播放列表
async function getEverySongDetailBy(id) {
    let res = await getEverySongDetail(id)
    if (res.data.code == 200) {
        music.addPlayingList(res.data.songs[0]) //添加当前播放列表
        music.SaveSongDetailAndaddHistoryPlayList(res.data.songs[0]) //保存歌曲详细信息，并添加历史列表
    }
}

//点击轮播图播放
// 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词,
// 1009: 电台, 1014: 视频, 1018:综合, 2000:声音
//点击轮播图
function get(item) {
    console.log(item);
    if (item.targetType == '1000') {  //如果是歌单类型
        router.push({
            name: 'Songlistdetail',
            params: { id: item.targetId }
        })
    }
    if (item.targetType == '1004') {  //如果是mv
        router.push({
            name: 'Videodetail',
            params: {
                id: item.targetId,
                type: 'mv'
            }
        })
    }
    if (item.targetType == '10') {   //如果是专辑
        router.push({
            name: 'Albumdetail',
            params: { id: item.targetId }
        })
    }
    if (item.targetType == '1') {  //歌曲
        //获取歌曲播放URL，并存放到仓库中
        getSongUrlBy(item.targetId)
        //获取歌曲详细,保存歌曲详细信息，添加当前和历史播放列表
        getEverySongDetailBy(item.targetId)
        //更改播放状态
        music.changePlayState(true) 
    }
}
</script>

<style lang="scss" scoped>
.banner {
    position: relative;

    .el-carousel__item img {
        height: 100%;
        width: 100%;
        opacity: 0.85;
        line-height: 200px;
        margin: 0;
        text-align: center;
        border-radius: 8px;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
        border-radius: 8px;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
        border-radius: 8px;
    }

    .title {
        position: absolute;
        padding: 3px 8px;
        bottom: 0;
        right: 0;
        color: white;
        border-radius: 8px 0 8px 0px;
    }
}

.red {
    background-color: #cc4a4a;
}

.blue {
    background-color: #4a79cc;
}

//走马灯指示器样式
:deep(.el-carousel__indicator--horizontal button) {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    opacity: 0.5;
}

:deep(.el-carousel__indicator--horizontal.is-active button) {
    width: 8px;
    height: 8px;
    background: red;
    opacity: 0.5;
}
</style>